<template>
	<view>
		<view class="condition-selector" @click="changeShow">
			<view class="action">
				<button class="cu-btn round bg-white border-pink">筛选</button>
			</view>
			<view class="content" v-if="goods || hobby">
				<view class="text-item" v-if="goods">
					<view class="text-item-title">技能</view>
					<view class="text-item-content">{{ goods }}</view>
				</view>
				<view class="text-item" v-if="hobby">
					<view class="text-item-title">爱好</view>
					<view class="text-item-content">{{ hobby }}</view>
				</view>
				<view class="text-item" v-if="sexCheckeds.length">
					<view class="text-item-title">性别</view>
					<view class="text-item-content">
						<span v-if="sexCheckeds.includes('1')">男</span>
						<span v-if="sexCheckeds.includes('0')">女</span>
						<span v-if="sexCheckeds.includes('2')">未知</span>
					</view>
				</view>
				<view class="text-item" v-if="age">
					<view class="text-item-title">年龄</view>
					<view class="text-item-content">{{ age }}</view>
				</view>
			</view>
		</view>
		<view class="props-overlay" v-if="show"></view>
		<view v-if="show" class="condition-props">
			<view class="condition-item">
				<view class="title">输入技能</view>
				<textarea
					class="textarea-box"
					auto-height="true"
					maxlength="30"
					rows="2"
					v-model="goods"
					placeholder="输入技能进行搜索"
				></textarea>
			</view>

			<view class="condition-item">
				<view class="title">
					选择爱好
					<span class="sub-title">选择爱好进行搜索</span>
				</view>

				<view class="hobby-content">
					<template v-for="(item, index) in labelList">
						<view v-if="item" :class="['label-li', labelON(index) ? 'on' : '']" @click="changeLabel(index)">
							{{ item }}
						</view>
					</template>
				</view>
			</view>

			<view class="condition-item" v-if="source == 'chat'">
				<view class="title">性别</view>
				<checkbox-group class="condition-content" @change="sexChange">
					<label>
						<checkbox value="1" :checked="sexCheckeds.includes('1')" />
						男
					</label>
					<label>
						<checkbox value="0" :checked="sexCheckeds.includes('0')" />
						女
					</label>
					<label>
						<checkbox value="2" :checked="sexCheckeds.includes('2')" />
						保密
					</label>
				</checkbox-group>
			</view>

			<view class="condition-item" v-if="source == 'chat'">
				<view class="title">年龄</view>

				<textarea
					class="textarea-box"
					auto-height="true"
					maxlength="3"
					rows="2"
					v-model="age"
					placeholder="年龄筛选"
				></textarea>
			</view>

			<view class="btn-wrap">
				<view class="btn-ca btn-cancel" @click="selectCancel">取消</view>
				<view class="btn-ca btn-affirm" @click="selectAffirm">搜索</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "UserFiltrate",
	data() {
		return {
			sexCheckeds: [],
			age: "",
			goods: "",
			hobby: "",
			show: false, //爱好的选择弹窗
			labelListIndex: [],
			labelList: [],
		}
	},
	props: ["source"],
	created() {
		const hobby = uni.getStorageSync("userInfo")?.hobby
		const hobbyArr = hobby.split("-")
		const hobby_list = uni.getStorageSync("hobby_list") ?? "[]"

		const arr = hobbyArr.concat(hobby_list)

		let list = arr.filter((item, index) => arr.indexOf(item) === index)

		this.labelList = list
	},
	methods: {
		//性别选择
		sexChange(e) {
			this.sexCheckeds = e.detail.value
		},
		//爱好 -- 取消
		selectCancel() {
			this.show = false

			this.hobby = ""
			this.goods = ""
			this.age = ""
			this.labelListIndex.length = 0
			this.sexCheckeds.length = 0

			this.$emit("selectCancel")
		},
		//爱好 -- 确定
		selectAffirm() {
			let s = ""

			this.labelList.forEach((item, index) => {
				s += this.labelListIndex.includes(index) ? `${item}-` : ""
			})
			this.show = false

			s = s.substring(0, s.length - 1)

			this.hobby = s

			const data = {
				hobby: this.hobby,
				good_at: this.goods,
				sexChecked: this.sexCheckeds,
				age: this.age,
			}

			this.$emit("transmit", data)
		},
		labelON(index) {
			let s = false
			if (this.labelListIndex.includes(index)) {
				s = true
			} else {
				s = false
			}
			return s
		},
		changeShow() {
			this.show = !this.show
			this.$emit("changeShow", "")
		},
		changeLabel(index) {
			const ind = this.labelListIndex.indexOf(index)
			if (ind == -1) {
				this.labelListIndex.push(index)
			} else {
				this.labelListIndex.splice(ind, 1)
			}
		},
	},
}
</script>
<style scoped lang="scss">
.condition-selector {
	position: relative;
	padding-left: 16rpx;
	letter-spacing: 1px;
	display: flex;
	flex-direction: column;
	width: 140upx;
	max-width: 140upx;
	margin-bottom: -2upx;
}

.cu-btn {
	flex-wrap: nowrap;
}

.condition-item {
	margin-bottom: 40rpx;

	.title {
		flex-shrink: 0;
		font-weight: bold;
		color: #444;

		.sub-title {
			font-size: calc(var(--amplified_base) * 16rpx);
			color: #ccc;
			font-weight: initial;
		}
	}

	.textarea-box {
		width: 100%;
		margin-top: 20rpx;
		padding: 20rpx;
		line-height: 1;
		background-color: #f0f0f0;
		border-radius: 20rpx;
		font-size: calc(var(--amplified_base) * 32rpx);

		.uni-textarea-placeholder {
			font-size: calc(var(--amplified_base) * 18rpx);
			line-height: 1.6;
			letter-spacing: 1px;
		}
	}
}

.condition-content {
	margin-top: 20rpx;
}

.uni-label-pointer {
	margin-right: 20rpx;
}

.condition-selector-title {
	height: 70rpx;
	line-height: 1;
	border: 1px solid #1a66ff;
	color: #1a66ff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.border-pink {
	border: 1px solid #1a66ff;
	color: #1a66ff;
	white-space: nowrap;
}
.content {
	padding: 0 20upx 20upx 20upx;
	margin-top: 10upx;
	position: relative;
	left: -590upx;
	width: 750upx;
	background: #fff;
	font-weight: 400;
	padding-bottom: 20upx;
}
.text-item {
	display: flex;
	align-items: center;
	font-size: 12px;
	margin-top: 10upx;
}

.text-item-title {
	color: #666;
	width: 3em;
	flex-shrink: 0;
}
.text-item-content {
	color: #999;
	word-break: break-all;
	span {
		margin-right: 10rpx;
	}
}
.props-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background-color: rgba(0, 0, 0, 0.7);
}
.condition-props {
	position: fixed;
	// top: 0;
	top: var(--status-bar-height);
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 1000;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
	padding: 40rpx;
}

.btn-wrap {
	position: absolute;
	bottom: 60rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 40rpx;
	line-height: 1;
}
.btn-ca {
	padding: 24rpx 80rpx;
	border-radius: 999rpx;
	font-size: 32rpx;
	letter-spacing: 2rpx;
}
.btn-cancel {
	border: 1rpx solid #1a66ff;
	color: #1a66ff;
}
.btn-affirm {
	background-color: #1a66ff;
	color: #fff;
}
.hobby-content {
	width: 100%;
	max-height: 46vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	align-content: flex-start;
	overflow: auto;
}
.label-li {
	padding: 12rpx 24rpx;
	background-color: #f2f2f2;
	color: #333;
	letter-spacing: 1px;
	margin-right: 18rpx;
	margin-top: 18rpx;
	border-radius: 99rpx;
}
.on {
	background-color: #1a66ff;
	color: #fff;
}
</style>
